import React from 'react';
import { BrowserRouter as Router, Routes, Route, useLocation } from 'react-router-dom';
import { Layout } from 'antd';
import { TransitionGroup, CSSTransition } from 'react-transition-group';
import Navigation from './components/Navigation';
import CustomBreadcrumb from './components/CustomBreadcrumb';
import Home from './pages/Home';
import About from './pages/About';
import UserList from './pages/UserList';
import RoleList from './pages/RoleList';
import './App.css';

const { Sider, Content } = Layout;

function AnimatedRoutes() {
  const location = useLocation();
  
  return (
    <div style={{ position: 'relative', minHeight: '100vh' }}>
      <TransitionGroup component={null}>
        <CSSTransition
          key={location.pathname}
          timeout={300}
          classNames="page-transition"
          unmountOnExit
        >
          <div style={{ position: 'absolute', width: '100%' }}>
            <Routes location={location}>
              <Route path="/" element={<Home />} />
              <Route path="/users" element={<UserList />} />
              <Route path="/roles" element={<RoleList />} />
              <Route path="/about" element={<About />} />
            </Routes>
          </div>
        </CSSTransition>
      </TransitionGroup>
    </div>
  );
}

function App() {
  return (
    <Router>
      <Layout style={{ minHeight: '100vh' }}>
        <Sider 
          theme="light" 
          width={256}
          style={{ 
            height: '100vh',
            position: 'fixed',
            left: 0,
            backgroundColor: '#fff'
          }}
        >
          <div style={{ padding: '16px' }}>
            <Navigation />
          </div>
        </Sider>
        <Layout style={{ marginLeft: 256 }}>
          <Content style={{ padding: '20px', background: '#fff' }}>
            <div style={{ marginBottom: '16px' }}>
              <CustomBreadcrumb />
            </div>
            <AnimatedRoutes />
          </Content>
        </Layout>
      </Layout>
    </Router>
  );
}

export default App;